<template>
  <div style="position: relative; height: 100%;">
    <el-form :model="form" :rules="rules" label-width="120px" :inline="true" style=" display: flex; flex-direction: column;  height: calc(100% - 30px);">
      <div>
        <el-form-item label="设备名称" prop="equipmentName">
          <p>{{ form.equipmentName || '- -' }}</p>
        </el-form-item>
        <el-form-item label="设备型号" prop="remark">
          <p>{{ form.productName || '未知' }}</p>
        </el-form-item>
        <el-form-item label="设备编码" prop="equipmentCode">
          <p> {{ form.equipmentCode || '- -' }} </p>
        </el-form-item>
        <el-form-item label="设备识别码" prop="nodeId">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="form.nodeId"
            placement="top"
          >
            <p>{{ form.nodeId || '- -' }}</p>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="安装位置" prop="remark" show-overflow-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="getParkPositionStr(form.parkBuildingName, form.parkBuildingAreaName, form.parkBuildingFloorName, form.parkBuildingRoomName)"
            placement="top"
          >
            <p>{{ getParkPositionStr(form.parkBuildingName, form.parkBuildingAreaName, form.parkBuildingFloorName, form.parkBuildingRoomName) }}</p>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="运行状态" >
          <div style="width: 280px;">
            <el-tag v-if="form.deviceStatus == 'ONLINE'" type="success">在线</el-tag>
            <el-tag v-if="form.deviceStatus == 'OFFLINE'" type="warning">离线</el-tag>
            <el-tag v-if="form.deviceStatus == 'ABNORMAL'" type="danger">异常</el-tag>
            <el-tag v-if="form.deviceStatus == 'INACTIVE'" type="info">未激活</el-tag>
            <el-tag v-if="form.deviceStatus == 'FROZEN'" type="info">冻结</el-tag>
            <el-tag v-if="form.deviceStatus == 'HIBERNATE'" type="info">休眠</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="录入时间" prop="updateTime">
          <p>{{ form.createTime || '- -' }}</p>
        </el-form-item>
        <br>
        <el-form-item label="备注" prop="remark">
          <p>{{ form.remark || '- -' }}</p>
        </el-form-item>
      </div>
      <el-table v-loading="alarmTableLoading" :data="alarmList" style="flex: 1;" @selection-change="SelectionChange">
        <el-table-column label="告警编号" align="center" prop="alarmCode" show-overflow-tooltip />
        <el-table-column label="告警类型" align="center" prop="alarmType" show-overflow-tooltip>
          <template #default="scope">
            <p v-if="scope.row.alarmType == 1">通行告警</p>
            <p v-else-if="scope.row.alarmType == 2">安防告警</p>
            <p v-else-if="scope.row.alarmType == 3">告警</p>
            <p v-else-if="scope.row.alarmType == 4">恢复</p>
            <p v-else>未知</p>
          </template>
        </el-table-column>
        <el-table-column label="告警事件" align="center" prop="remark" show-overflow-tooltip />
        <el-table-column label="告警等级" align="center" prop="alarmGrade" show-overflow-tooltip>
          <template #default="scope">
            <p v-if="scope.row.alarmGrade == 1">提醒</p>
            <p v-else-if="scope.row.alarmGrade == 2">普通</p>
            <p v-else-if="scope.row.alarmGrade == 3">重要</p>
            <p v-else>未知</p>
          </template>
        </el-table-column>
        <el-table-column label="告警位置" align="center" prop="alarmAddress" show-overflow-tooltip />
        <el-table-column label="上报时间" align="center" prop="alarmTime" show-overflow-tooltip />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="查看照片" placement="top">
              <el-button
                v-hasPermi="['equipment:equipment-info:edit']"
                link
                type="primary"
                icon="Edit"
                @click="openUpdate(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-model:page="alarmQueryParams.pageNum" v-model:limit="alarmQueryParams.pageSize" :total="alarmTotal" @pagination="getAlarmList" />
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { cameraInfoForm, cameraInfoQuery } from '@/api/security/camera/camera-info/types';
import request from '@/utils/request';
import { listalarmrecord } from '@/api/workbench/alarm/alarm-record';
import { getParkPositionStr } from '@/utils/parkUtil';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  equipmentId: String | Number
});

const alarmTableLoading = ref(false);
const alarmList = ref([]);
const alarmTotal = ref(0);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);

const data = reactive<PageData<cameraInfoForm, cameraInfoQuery>>({
  form: { },
  alarmQueryParams: {
    equipmentId: undefined,
    pageNum: 1,
    pageSize: 10
  }
});

const { form, alarmQueryParams } = toRefs(data);

/** 新增修改多选框选中数据 */
const SelectionChange = (selection: EquipmentInfoVO[]) => {
  ids.value = selection.map((item) => item.equipmentId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;

  form.value.equipmentIdList = ids.value;
};

/**  查询报警列表**/
const getAlarmList = async (equipmentId: string | number) => {
  alarmTableLoading.value = true;
  alarmQueryParams.value.equipmentId = equipmentId;
  const res = await listalarmrecord(alarmQueryParams.value);
  if (res.code !== 200) {
    proxy?.$modal.msgError('获取报警记录失败!');
  }
  alarmList.value = res.rows;
  alarmTotal.value = res.total;
  alarmTableLoading.value = false;
};

onMounted(() => {
  proxy?.$modal.loading('正在加载');
  request({
    url: '/equipment/equipment-info/' + props.equipmentId,
    method: 'get',
    params: { }
  }).then((res)=> {
    Object.assign(form.value, res.data);

    getAlarmList(res.data.equipmentId);
  }).finally(() => { proxy.$modal.closeLoading() })
});
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.pagination-container) {
  margin-top: 0;
}

p {
  width: 280px;
  padding: 0;
  margin: 0;
}

.ldian {
  margin-right: 10px;
  font-weight: 400;
  color: #51d351;
}

.hdian {
  margin-right: 10px;
  font-weight: 400;
  color: #ff9900;
}

.gzdian {
  margin-right: 10px;
  font-weight: 400;
  color: #fb6260;
}

.label {
  height: 40px;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;

  &:before {
    margin-right: 8px;
    content: '';
    width: 5px;
    height: 17px;
    display: inline-block;
    background-color: #0058f6;
    border-radius: 66px 66px 66px 66px;
  }
}
p {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>
